<template>
	<view class="addRecep">
		<nav-bars title='接待人员'></nav-bars>
		<view class="content">
			<view class="customTit">
				<image :src="path" mode=""></image>
				<view class="tit">
					{{name}}
					<view class="iconBtn">
						<!-- <text class="iconfont">&#xe663;</text> -->
						<text class="iconfont" @click="delIconBtn">&#xe653;</text>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="text">接待人员<text @click="addRecep">+ 添加</text></view>
				<view v-if="list.length" class="item" v-for="(item,index) in list" :key="index">
					<image :src="item.headimg.path" mode=""></image>
					<view class="info">
						{{item.realname?item.realname:item.nickname}}
						<text @click="toDelRecep(item.qy_user_id)">删除</text>
					</view>
				</view>
				<view class="" v-else>
					<u-empty text="暂无数据" mode="list"></u-empty>
				</view>
			</view>
		</view>
		<!-- 添加接待人员弹出层 -->
		<u-popup v-model="show" border-radius="20" mode="center" @close="closePop">
			<scroll-view scroll-y="true" class="popList" @scrolltolower="openMore">
				<!-- <view class=""> -->
				<template v-if="needList.length">
					<view class="item" v-for="(item,index) in needList" :key="index">
						<!-- <image src="../../../static/common/avator.png" mode=""></image> -->
						<checkbox shape="circle" @click="changeCheck(item.checked,index)" :checked="item.checked" :disabled="false"> {{item.name?item.name:item.alias}}</checkbox>
					</view>
				</template>
				<!-- </view> -->
				<template v-else>
					<view class="" style="text-align: center; line-height: 500rpx;">
						暂无数据~
					</view>
				</template>
			</scroll-view>
			<view class="btn">
				<button type="default" @click="toAddBtn">确定</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import customeApi from '@/service/custome.js'
	export default{
		data(){
			return{
				open_kfid:'',
				path:'',
				name:'',
				list:[],//接待人员列表
				needList:[],//需要添加的接待人员
				page:1,
				pagesize:10,
				show:false
			}
		},
		onLoad(options) {
			this.open_kfid = options.open_kfid
			this.path = options.path
			this.name = options.name
			this.getRecepList()
		},
		methods:{
			// 获取已添加的接待人员列表
			getRecepList(){
				let params = {
					open_kfid:this.open_kfid
				}
				customeApi.getRecep(params).then(res=>{
					console.log(res,'接待人员列表')
					if(res.code==1){
						this.list = res.data?res.data:[]
					}
				})
			},
			
			// 获取需要添加的接待人员列表
			getQyRecepList(){
				this.page = 1
				this.show = true
				let params = {
					is_qy:1,//是否只显示激活企业微信的 1 是
					is_all:'',//是否查看所有部门的企业微信员工 1 是 0否 只查看当前下属
					is_msg_audit:'',//是否只显示开启存档的员工
					page:this.page,
					pagesize:this.pagesize
				}
				customeApi.getQyRecep(params).then(res=>{
					console.log(res,'需要接待人员列表')
					if(res.code==1){
						res.data.data.map(item=>item.checked=false)
						this.needList = res.data.data?res.data.data:[],
						console.log(this.needList,'接待')
					}
				})
			},
			// 上拉加载更多需要添加的接待人员列表
			openMore(){
				this.page++
				let params = {
					is_qy:1,
					is_all:'',
					is_msg_audit:'',
					page:this.page,
					pagesize:this.pagesize
				}
				customeApi.getQyRecep(params).then(res=>{
					console.log(res,'需要接待人员列表')
					if(res.code==1){
						res.data.data.map(item=>item.checked=false)
						this.needList = this.needList.concat(res.data.data)
					}
				})
			},
			// 弹出层关闭
			closePop(){
				this.needList = []
				this.page = 1
			},
			
			// 点击添加按钮
			addRecep(){
				this.getQyRecepList()
			},
			// 点击复选框
			changeCheck(checked,index){
				console.log(checked,index,'-----')
				if(checked){
					this.needList.map(item=>item.checked = false)
					this.needList[index].checked=false
				}else{
					this.needList.map(item=>item.checked = false)
					this.needList[index].checked=true
				}
			},
			
			// 选择后确定
			toAddBtn(){
				let selectArr = []
				this.needList.map(item=>{
					if(item.checked){
						selectArr.push(item.user_id)
					}
				})
				if(!selectArr.length){
					uni.showToast({
						title:'请选择接待人员',
						icon:'none'
					})
					return
				}
				let params = {
					open_kfid:this.open_kfid,
					user_ids:selectArr
				}
				customeApi.customAddRecep(params).then(res=>{
					console.log(res,'添加接待人员结果')
					if(res.code==1){
						uni.showToast({
							title:'添加成功',
							icon:'success'
						})
						this.show = false
						this.getRecepList()
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			
			// 删除接待人员
			toDelRecep(qyUserId){
				let arr = []
				arr.push(qyUserId)
				uni.showModal({
					content:'确定删除该接待人员吗？',
					success:res=>{
						if(res.confirm){
							let params = {
								open_kfid:this.open_kfid,
								qy_user_ids:arr
							}
							customeApi.customDelRecep(params).then(res=>{
								console.log(res,'删除接待人员结果')
								if(res.code==1){
									uni.showToast({
										title:'删除成功',
										icon:'success'
									})
									this.getRecepList()
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
						}
					}
				})
			},
			
			// 删除客服按钮
			delIconBtn(){
				uni.showModal({
					content:'确定删除该客服吗？',
					success:res=>{
						if(res.confirm){
							let params = {
								open_kfid:this.open_kfid
							}
							customeApi.delCustom(params).then(res=>{
								console.log(res,'删除客服结果')
								if(res.code==1){
									uni.showToast({
										title:'删除成功',
										icon:'success'
									})
									let pages = getCurrentPages();  //获取所有页面栈实例列表
									console.log(pages)
									let nowPage = pages[ pages.length - 1];  //当前页页面实例
									let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
									console.log(prevPage)
									prevPage.$vm.avatar = {path:'',media_id:''};
									prevPage.$vm.name = '';
									prevPage.$vm.open_kfid = '';
									setTimeout(function(){
										uni.navigateBack({
											delta:1
										})
									},300)
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{height: 100%;}
	.addRecep{
		height: 100%;
		background-color: #fff;
		.content{
			.customTit{
				padding: 50rpx 32rpx;
				display: flex;
				border-bottom: 2rpx solid #ccc;
				align-items: center;
				image{
					flex-shrink: 0;
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					border: 2rpx solid #ccc;
					margin-right: 24rpx;
				}
				.tit{
					width: 100%;
					font: 500 28rpx/28rpx PingFang SC;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.iconBtn{
						display: flex;
						text{
							font-size: 40rpx;
							margin-left: 20rpx;
						}
					}
				}
			}
			.list{
				padding: 50rpx 32rpx;
				.text{
					font: 500 28rpx/68rpx PingFang SC;
					text{
						color: skyblue;
						margin-left: 50rpx;
					}
				}
				.item{
					display: flex;
					align-items: center;
					margin: 30rpx 0;
					image{
						flex-shrink: 0;
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 20rpx;
						border: 2rpx solid #ccc;
					}
					.info{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font: 500 28rpx/28rpx PingFang SC;
						text{
							color: skyblue;
						}
					}
				}
			}
		}
		.popList{
			padding: 30rpx;
			width: 600rpx;
			height: 700rpx;
			.item{
				padding: 30rpx 0;
			}
		}
		.btn{
			button{background-color: #C3AB7C;color: #fff;font: 500 30rpx/80rpx PingFang SC;}
		}
	}
</style>
